<template>
<div class="memberOneWrap">
    <div class="memberHead" style>
        <img :src="image.imageUrl" class="fl"/>
        <img :src="image.btnImageUrl" class="fr"/>
    </div>
    <div class="memberOne">
        <div>
            <div class="memberOne_list" v-for="item in data" :key="item.commonId" :shopID="item.commonId" @click="$emit('commonId' , item.commonId)">
                <a href="javascript:void(0)">
                <img :src="item.goodsImage" class="goods-pic"/>
                <p class="goods-name">{{item.goodsName}}</p>
                <div class="goods-price clearfix">
                    <p class="fl">
                    <img src="https://api.10street.cn/wap/images/oneBuy/priceIcon.png" alt />￥
                    <em>1</em>
                    </p>
                    <h3 class="fl">￥{{item.goodsPrice}}</h3>
                </div>
                    <p class="oneName">{{item.vipPrice}}元购</p>
                </a>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props:['val'],
    watch:{
        val(){
            this.image = JSON.parse(this.val.itemData)[0].topImage
            this.data = JSON.parse(this.val.itemData)[0].goods
        }
    },
    data(){
        return {
            data:"",
            image:"",
        }
    }
}
</script>

<style lang='stylus' scope>
.memberOneWrap
    overflow: hidden
    background: #FFE1CA
    margin: 0 0.1rem
    padding: 0.1rem
    border-radius: 0.1rem
    .memberHead
        padding-bottom: 0.1rem
        img
            &:nth-of-type(1)
                height: 0.20rem
                margin: 0.03rem 0
            &:nth-of-type(2)
                height: 0.26rem
                margin: 0
                float right
    .memberOne
        display: flex;
        overflow: auto;
        &>div
            display: flex;
        .memberOne_list
            position: relative
            overflow: hidden
            margin-right 0.05rem
            width: 0.968rem
            padding-bottom: 0.11rem
            border-radius: 0.08rem
            display inline-block
            background white
            img
                height 0.968rem
            .oneName
                position: absolute
                top: 0.077rem
                left: 0.077rem
                background: linear-gradient(270deg,#FE463E 0%,#FF814B 100%)
                border-radius: 0.033rem
                color: #fff
                font-size: 0.11rem
                text-align: center
                height: 0.176rem
                line-height: 0.198rem
                width: 0.396rem
            .goods-name
                margin: 0.02rem 0.088rem
                font-size: 0.1rem
                line-height: 0.17rem
                height: 0.308rem
                color: #333333
                overflow: hidden
            .goods-price
                margin: 0 0.1rem
                line-height: 0.22rem
                height: 0.22rem
                overflow: hidden
                h3
                    color: #999
                    font-size: 0.11rem
                    text-decoration: line-through
                    margin-left: 0.033rem
                p
                    font-size: 0.1rem
                    color: #FF4A42
                    img 
                        width: 0.1rem
                        margin: -0.022rem 0.044rem 0 0
                        height: 0.12rem
                    em
                        font-size: 0.15rem
                        font-weight: 600
</style>